<template>
  <div style="background-color: #f5f6fa; ">
    <!-- <hear></hear> -->
    <BDhear :num="9"></BDhear>
    <div style="display: flex;justify-content: center;overflow-y: auto;margin: 55px 0 10px 0;">
          <div style="width: 90%;">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>寄件方式：线下邮寄</span>
                <el-button style="float: right; padding: 3px 0" type="text">快递公司：顺丰快递</el-button>
              </div>
              <div style="display: flex;justify-content: space-between;">
                <div style="width: 45%;">
                  <el-card class="box-card">
                    <div class="text item">
                      寄件方
                      <el-form ref="form" :model="kuaidiForm" label-width="120px" class="con-from">

                        <el-form-item label="寄件人姓名 :">
                          <el-input v-model="kuaidiForm.sender_contact"></el-input>
                        </el-form-item>
                        <el-form-item label="寄件人手机号 :">
                          <el-input v-model="kuaidiForm.sender_mobile"></el-input>
                        </el-form-item>


                        <el-form-item label="寄件人地址 :">
                          <!-- <el-input v-model="jijian.usercode"></el-input> -->
                          <region-selects @change="regionChange1" v-model="addressDemo" />
                        </el-form-item>
                        <el-form-item label="寄件人详细地址 :">
                          <el-input v-model="kuaidiForm.sender_address"></el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-card>
                </div>
                <div style=" display: flex; align-items: center;   width: 8%;">
                  <img style="width: 100%;" src="@/assets/zuoy.png" alt="" srcset="">
                </div>
                <div style="width: 45%;">
                  <el-card class="box-card">
                    <div class="text item">
                      收货人
                      <el-form ref="form" :model="kuaidiForm" label-width="120px" class="con-from">
                        <el-form-item label="收货人姓名 :">
                          <el-input v-model="kuaidiForm.contact"></el-input>
                        </el-form-item>
                        <el-form-item label="收货人手机号 :">
                          <el-input v-model="kuaidiForm.mobile"></el-input>
                        </el-form-item>
                        <el-form-item label="收货人地址 :">
                          <region-selects @change="regionChange" v-model="region" />
                        </el-form-item>
                        <el-form-item label="收货人详细地址 :">
                          <el-input v-model="kuaidiForm.address"></el-input>
                        </el-form-item>

                      </el-form>
                    </div>
                  </el-card>
                </div>
              </div>
            </el-card>
            <el-card style="margin-top: 13px;" class="box-card">
              <div slot="header" class="clearfix">
                <span>产品信息</span>
              </div>
              <div class="text item">
                <el-form ref="form" :model="kuaidiForm" label-width="150px" class="con-from">

                  <el-form-item style="width:50%" label="产品名称 :">
                    <el-input v-model="kuaidiForm.userName"></el-input>
                  </el-form-item>
                  <el-form-item style="width:50%" label="数量 :">
                    <el-input v-model="kuaidiForm.number"></el-input>
                  </el-form-item>


                  <el-form-item style="width:50%" label="保价 :">
                    <el-input v-model="kuaidiForm.goods_amount"></el-input>
                  </el-form-item>
                  <el-form-item style="width:50%" label="付款方式 :">
                    <!-- 付款方式，支持以下值： 1:寄方付 2:收方付 3:第三方付 -->
                    <el-radio-group v-model="kuaidiForm.payMethod">
                      <el-radio :label="1">寄方付</el-radio>
                      <el-radio :label="2">收方付</el-radio>
                      <el-radio :label="3">第三方付</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </div>

        </div>

    <div class="footer">
      <el-button
        @click="shang()"
        v-if="isShow"
        style="width: 175px; height: 60px"
        >上一步</el-button
      >
      <el-button
        v-if="isShow"
        @click="tiao()"
        style="width: 175px; height: 60px"
        type="primary"
        >提交审核</el-button
      >
      <el-button
        v-if="!isShow"
        @click="$router.push('/')"
        style="width: 175px; height: 60px"
        type="primary"
        >回到首页</el-button
      >
      <el-button
        v-if="isShow1"
        style="width: 175px; height: 60px"
        type="info"
        disabled
        >审核中</el-button
      >
      <el-button
        v-if="isShow2"
       
        style="width: 175px; height: 60px"
        type="primary"
        disabled=""
        >审核已完成</el-button
      >
      <!-- <el-button  @click="$router.push('/')"  type="info" disabled="">审核中  </el-button> -->
      <!-- <el-button  @click="$router.push('/')"  type="info" disabled="">审核中  </el-button> -->
    </div>
  </div>
</template>

<script>
import { RegionSelects } from 'v-region'
// import hear from ".././../components/hear.vue";
import {
  bhpay2,
  danbaoqianzhang,
  bhpay,
  bhpay3,
  enclosure,
  zhifuasd,
  faren,
  detail,
} from "@/api/system/liucheng";
import { datatijiao } from "@/api/system/liucheng";
import { sf_order, addresslist } from "@/api/user";
import BDhear from "./BDhear.vue";
import axios from "axios";

export default {
  components: {
    BDhear,
    RegionSelects
    // hear,
  },
  name: "ElectronicProtocol",
  data() {
    return {
      isShow: true,
      isShow1: false,
      isShow2: false,
      isShow3: false,
chanqi:{},
shoujian:{},
jijian:{},
      ElectronicProtocollist: { guarantee_apply_id: "549" },
      formData: {
        apply_number: sessionStorage.getItem("apply_number"),
        guarantee_apply_id: sessionStorage.getItem("guarantee_apply_id"),
        diya: null,
        chuzhi: null,
        fandanbao: null,
        // handler_name_one: undefined,
        // cardno_one: undefined,
        // captcha_one:"",
        // proid: undefined,
        // handler_mobile_one: undefined,
        // handler_name_one: "王治家",
        // cardno_one: "410381198711235517",
        // captcha_one: "123456",
        proid: undefined,
        // handler_mobile_one: "13681030210"
      },
      ciasd: true,
      xinxi:{

      },
  region: {
    "province": "110000", "city": "110000", "area": "110111",
        // province: '350000',
        // city: '350100',
        // area: '350104',
        town: ''
      },
// region:['110000', '130200', '140100'],
      farens:"",
      gongsi:"",
        kuaidiForm: {
        apply_number: sessionStorage.getItem("apply_number"),
        goods_amount: '',
        payMethod: '',
        address_id: '',
        sender_mobile: '',
        sender_contact: '',
        sender_province: '',
        sender_city: '',
        sender_area: '',
        sender_address: '',
        contact: '',
        mobile: '',
        address: '',
        province: '',
        city: '',
        area: '',
        userName: '',
        number: '',
      },
    };
  },
  created() {
    // this.ElectronicProtocols();
    // this.xinagqing();
    // this.wenjian()
    var leixng = sessionStorage.getItem("bhlein");
    if (leixng == "投标保函") {
      this.ciasd = false;
    }
       addresslist({ offset: 1, limit: 10, keywords: '', is_default: 1 }).then(res => {
      console.log(res.data.rows);
      this.addressDemo = {
        province: res.data.rows[0].province_code,
        city: res.data.rows[0].city_code,
        area: res.data.rows[0].area_code,
      }
      this.kuaidiForm.address_id = res.data.rows[0].id
      // this.totalAddress = res.data.total
      console.log(this.addressDemo);
    })
    // datatijiao(this.params).then(res => {
    //   if (res.data.code == 1) {
    //     this.$message.success('提交成')
    //     this.$router.push("/bidFrom");
    //   }
    // });
  },
  methods: {
       tiao() {
        console.log("tiao我要提交快递了");
        // return
      sf_order({ ...this.kuaidiForm }).then(res => {
        console.log(res);
        if (res.data.code == 1) {
          this.$message({
            type: 'success',
            message: res.data.msg
          });
             console.log("tiao我提交快递成功了");
          this.shenh()
          // this.$router.go(-1)
        } else {
          this.$message({
            message: res.data.msg
          });
        }
      })
    },
        shenh(){
             console.log("tiao我提交了第二次审核");
  axios({
        url: "http://192.168.0.28:8082/apply/baohan/subdata",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          apply_number: sessionStorage.getItem("apply_number"),
        },
        timeout: 10000,
        headers: {
          token: sessionStorage.getItem("token"),
        },
      })
        .then((res) => {
          //    this.$notify.error({
          //   message: res.data.msg
          // });
          console.log("tijiao", res);
          if (res.data.code == 1) {
            this.$message.success("提交成功等待审核");
            this.isShow = false;
          }
          //  this.$router.push("/BidSecurity/BidPayment");
          // this.$router.push("/BidSecurity/Bidpayment");
        })
        .catch((err) => {
          console.log("失败", err);
          if (err.response.data.code == 401) {
            this.$notify.error({
              message: "请重新登录",
            });
            this.$router.push("/login");
            return;
          }
          this.$notify.error({
            message: err.response.data.msg,
          });
        });
    },
     regionChange (val) {
       console.log(val);
      if (val.province) {
        // this.formAdress.province_code = val.province.key
        this.kuaidiForm.province = val.province.value
      }
      if (val.city) {
        // this.kuaidiForm.city_code = val.city.key
        this.kuaidiForm.city = val.city.value
      }
      if (val.area) {
        // this.kuaidiForm.area_code = val.area.key
        this.kuaidiForm.area = val.area.value
      }
    },
        regionChange1(val) {
      console.log("寄件方",val,this.kuaidiForm);
      if (val.province) {
        // this.formAdress.province_code = val.province.key
        this.kuaidiForm.sender_province = val.province.value
      }
      if (val.city) {
        // this.kuaidiForm.city_code = val.city.key
        this.kuaidiForm.sender_city = val.city.value
      }
      if (val.area) {
        // this.kuaidiForm.area_code = val.area.key
        this.kuaidiForm.sender_area = val.area.value
      }
    },
    // 文件
    wenjian(){
      var bbc={
         apply_number: sessionStorage.getItem("apply_number")
      }
enclosure(bbc).then((res) => {
  console.log(res.data.data)
  this.xinxi=res.data.data
  this.farens=res.data.data.faren
  this.gongsi=res.data.data.gongsi
  if(res.data.data.file.faren_file!==null){
    this.farenurl=res.data.data.file.faren_file
      this.faren = "查看";
            this.frqian = "已签订";
  }  if(res.data.data.file.xieyi_file!==null){
      this.danbaourl=res.data.data.file.xieyi_file
      this.danbao = "查看";
            this.dbqian = "已签订";
  }  if(res.data.data.file.zhenshi_file!==null){
     this.zhenshiurl=res.data.data.file.zhenshi_file
      this.zhenshi = "查看";
            this.zsqian = "已签订";
  }
})
    },
    //页面
    xinagqing() {
      var bbc = {
        bh_id: sessionStorage.getItem("guarantee_apply_id"),
      };
      detail(bbc).then((res) => {
        console.log("保函详情", res.data.data.jiben);
        console.log("审核状态", res.data.data.jiben.state);
        console.log("进度", res.data.data.jiben.step);
        console.log("审核人员", res.data.data.jiben.check_id);
        var shenhe = res.data.data.jiben.state;
        var jindu = res.data.data.jiben.step;
        var renyaun = res.data.data.jiben.check_id;
        // 测试
        //  this.isShow2=true

        if (shenhe == 0 && jindu == 1 && renyaun == null) {
          console.log("未提交");
        } else {
          this.isShow = false;
        }
        if (shenhe == 1 && jindu == 2 && renyaun == null) {
          console.log("第一次提交审核");
          this.isShow1 = true;
        }
        if (shenhe == 1 && jindu == 2 && renyaun !== null) {
          console.log("第一次已分配");
          this.isShow1 = true;
        }
        if (shenhe == 2 && (jindu == 3) & (renyaun !== null)) {
          console.log("第一次审核完成");
          this.isShow2 = true;
        }
        if (shenhe == 1 && (jindu == 4) & (renyaun !== null)) {
          console.log("第二次提交审核");
        }
        if (shenhe == 2 && (jindu == 3) & (renyaun !== null)) {
          console.log("第二次审核完成");
        }
        // 审核状态 state
        // 进度  step
        // 审核人员  check_id

        if (res.data.code == 1) {
          // this.$message.success("签订成功");
        }
      });
    },


    yulan(e) {
      let link = document.createElement("a");
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = this.$baseUrl + e + "";
      // link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      // document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      document.body.removeChild(link);
    },

    send() {
      axios({
        url: "http://192.168.0.28:8082/mobile/sms/send",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          mobile: this.formData.handler_mobile_one,
          event: "check",
        },
        timeout: 1000,
        headers: {
          token: sessionStorage.getItem("token"),
        },
      });
    },
    wancheng() {
      this.$message.error("请勿重复提交");
    },
    guarantee() {
      guarantee(this.formData).then(() => {});
    },
    shang() {
         this.$router.push("/BidSecurity/puBlic");
    },
  },
};
</script>

<style scoped>
.zhengc {
    font-size: 16px;
    color: rgb(51, 51, 51);
    flex: 1;
    flex-direction: column;
    display: flex;
}
.zhengch{
  display: flex;    margin-top: 5px;
}
.el-upload__tip {
  line-height: 1.2;
}
.main {
  /* position: absolute;
  top: 0;
  left: 0;
  bottom: 160px;
  right: 0; */
  padding: 0 11%;
  margin: auto;
  width: 100%;
  height: 360px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.main .yes {
  background: #fff;
  width: 100%;
  height: 360px;
  border: #cecece 1px solid;
}
.main h3 {
  margin: 20px;
}
.main .yesform {
  width: 100%;
  height: 260px;
  /* margin: 50px; */
}
.main .no {
  width: 49%;
  height: 360px;
  border: #cecece 1px solid;
}
.main .noform {
  width: 100%;
  height: 260px;
  /* margin: 50px; */
}
.main .noform button {
  width: 50%;
  height: 38px;
  background-color: #1795ff;
  color: #fff;
  border: none;
  position: absolute;
  border-radius: 5px;
  margin-left: 5px;
  margin-bottom: 1px;
}
.agreement {
  /* position: absolute;
  top: 63%;
  left: 10.7%; */
  padding: 5% 11%;
  width: 100%;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.agreements {
  /* position: absolute;
  top: 63%;
  left: 10.7%; */
  /* padding: 5% 11%; */
  padding: 10px;
  padding-top: 0px;
  margin: 0 7.5%;
  width: 85%;
  /* height: 200px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.footer {
  width: 100%;
  background-color: rgb(245, 246, 250);
  height: 100px;
  padding-top: 30px;
  /* margin-top: 10%; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
}

.EP_PDF_RIGHT {
  width: 220px;
  display: flex;
  justify-content: space-around;
  height: 67%;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  align-items: end;
}

.EP_PDF_IMG_LEFT {
  display: flex;
  align-items: center;
  /* width: 400px; */
  flex: 1;
  justify-content: space-around;
}

.EP_img {
  width: 59.4px;
  height: 61.97px;
  margin: 0 10px;
}
.leixingcss {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 33px;
  border-radius: 4px;
  background-color: #1795ff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  margin-left: 15px;
}
.EP_pdf_box {
  margin-top: 10px;
  position: relative;
  width: 100%;
  background: #fff;
  height: 105px;
  border: 1px solid #cecece;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
